<template>
	<!-- 图录号详情 -->
	<view class="centent">
		<!-- 
			导航栏
		 -->
		<u-navbar :placeholder="true" :title="list.title" :autoBack="true"> </u-navbar>

		<!-- 轮播图 -->
		<view>
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="item in list.swiperLIst">
					<view class="swiper-item">
						<view class="box">
							<image style="
                  border: 20rpx solid #fff;
                  box-shadow: 0px 0px 12rpx 6rpx #eee;
                  border-radius: 12rpx;
									max-width:600rpx ;
									max-height: 500rpx;
                " :src="item" mode="heightFix" />
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 标题 -->
		<view class="title">
			<view class="title-info">
				<view v-if="list.auctionState == 0" style="
            background-color: #3b83f6;
            color: #fff;
            font-size: 28rpx;
            padding: 2rpx 6rpx;
            margin-right: 20rpx;
          ">待预展</view>
				<view v-if="list.auctionState == 1" style="
					    background-color: #7ac7b3;
					    color: #fff;
					    font-size: 28rpx;
					    padding: 2rpx 6rpx;
					    margin-right: 20rpx;
					  ">预展中</view>
				<view style="font-size: 38rpx">{{list.title}}</view>
			</view>
			<view class="title-text">{{list.specification}} </view>
		</view>

		<!-- 价格 -->
		<!-- <view class="price">
			<view v-if="list.presentPrice" style="font-size: 40rpx; color: #ff3e3e; font-weight: 600">当前价格:{{list.presentPrice}}</view>
			<view v-else style="font-size: 40rpx; c	olor: #ff3e3e; font-weight: 600">未开拍</view>
		</view> -->

		<!-- 起拍价 -->
		<!-- <view class="start-price">
			<view class="start-price-son">
				<text> 起拍价: JPY {{list.startingPrice}} </text>
				<text> 保证金: JPY {{list.earnestMoney}} </text>
			</view>
			<view class="start-price-son">
				<text> 加价幅度: <a> 查看详情</a> </text>
			</view>
		</view> -->

		<!-- 出价记录
<!-- 		<view class="record" @click="onBidList">
			<view style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        ">
				<view style="margin-right: 20rpx"> 出价记录 </view>
				<view style="color: #666; font-size: 28rpx"> 0 次出价 </view>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view> -->

		<!-- 拍卖流程 -->
		<!-- 		<view class="record">
			<view>拍卖流程</view>
		</view>
 -->
		<!-- 拍卖详情 -->
		<!-- 	<view class="record" @click="AuctioNotice">
			<view>拍卖须知</view>
		</view>
 -->
		<!-- 猜你喜欢 -->
		<GuessLike v-if="list.length != 0" :infoId='infoId'></GuessLike>

		<view style="padding-bottom: 200rpx"></view>

		<!-- 锚点 -->
		<Anchor />

		<!-- 收藏 -->
		<Collect v-if="list.length"  />
	</view>
</template>

<script>
	import Anchor from "../../components/anchor.vue";
	import Collect from "../components/collect.vue";
	import GuessLike from "../components/guessLike.vue"
	export default {
		components: {
			Anchor,
			Collect,
			GuessLike
		},
		data() {
			return {
				list: [],
				infoId:''
			};
		},
		onLoad(option) {
			this.list = JSON.parse(decodeURIComponent(option.info));
			this.infoId = this.list.auctionId
			console.log(this.infoId);
		},
		methods: {
			AuctioNotice() {
				uni.navigateTo({
					url: '/pages/particulars/particularsInfoList/AuctionNotice/AuctionNotice'
				})
			},
			rightClick() {
				console.log(123);
			},
			onBidList() {
				uni.navigateTo({
					url: '/pages/particulars/bidList/bidList'
				})
			}
		},
		onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
			if (e.scrollTop > 500) { //当距离大于600时显示回到顶部按钮
				this.vm.$emit("customEvent", 1)
			} else { //当距离小于600时隐藏回到顶部按钮
				this.vm.$emit("customEvent", 0)
			}
		},
	};
</script>

<style lang="scss" scoped>
	.centent {
		background-color: #f8f8f8;

		.swiper {
			background-color: #fff;
			height: 700rpx;

			.swiper-item {
				text-align: center;

				.box {
					padding: 80rpx 40rpx;
				}
			}
		}

		.title {
			border-bottom: 2rpx solid #eee;
			background-color: #fff;
			height: 120rpx;
			padding: 30rpx 40rpx;

			.title-info {
				display: flex;
				align-items: center;
			}

			.title-text {
				margin-top: 10rpx;
				color: #999;
			}
		}

		.price {
			padding: 30rpx 40rpx;
			background-color: #fff;
			display: flex;
			align-items: center;

			view {
				margin-right: 30rpx;
			}
		}

		.start-price {
			margin-top: 20rpx;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			padding: 30rpx 40rpx;

			.start-price-son {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-size: 28rpx;
					color: #666;
				}

				a {
					list-style: none;
					color: #92a7ff;
				}
			}
		}

		.record {
			height: 80rpx;
			background-color: #fff;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 40rpx;
		}


	}
</style>
